<!DOCTYPE html>
<html>
<head>
    <title>用户分类信息表</title>
	<#include "/header.html">
</head>
<body>
<style>
    th{
        text-align: center;
    }
    .out1,in1{border:1px inset #ccc;height:20px;overflow-y:hidden;line-height:20px;width:100%}
    img {border-width: 0px 0px 0px 0px}
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>

<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label">分类名称</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="barticletypeinfo.articleTypeName" placeholder="分类名称"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">分类logo</div>
            <div class="col-sm-10">
                <img id="articleTypeLogo" width="100px" height="100px" />
                <!--<img width="200px" height="200px" id="img"/>-->
                <input type="file"  class="form-control" id='uploadImg' onchange="inserttx(this)"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="back" value="返回"/>
        </div>
    </form>
</div>
</div>
<script language="javascript" defer>
    function upload(file, pathname = 'ps') {
        const client = new window.OSS({
            region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
            bucket: 'zktuistatic'
        });
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath =yeaer+""+month+""+day;
        var key = "";
        key=pathname+"/"+datePath+"/image"+String(parseInt(Math.random() * 10000000, 10)+getFileExtendingName(file.name));
        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function(ret) {
            console.log(ret.res.requestUrls[0]);
            vm.barticletypeinfo.articleTypeLogo=ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/","http://zktfile.wxslzf.com/");
            $("#articleTypeLogo").attr("src", vm.barticletypeinfo.articleTypeLogo);

        }).catch(function(err) {
            console.log(err);
        });
    }
    function inserttx(e) {
        var files = e.files;
        var length = files.length;
        console.log("选择了" + length + "张图片");
        upload(files[0]);
    }
    function getFileExtendingName (filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }
</script>
<script src="${request.contextPath}/statics/js/modules/sys/busertypeinfo.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/js/modules/sys/bese64.js"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
</body>
</html>